<template>
  <div class='notify'>
    <ul>
      <li v-for='(item,index) in notifyData'
          :key='index'>
        <div class='title'>

          {{item.notifyTitle}}
        </div>
        <div class='conent'>
          {{item.notifyContent}}
        </div>
        <div class='date'>
          <span> {{item.beginDateStr}}</span>
          <div @click="goTo(item,'/pages/home/notifyDetail')">查看详情 <i class='qianjin'></i></div>
        </div>
      </li>
    </ul>
  </div>
</template>


<script>

import { LiteappNotify } from '@/api/api'
import {mapMutations} from 'vuex'
export default {
  data () {
    return {

      notifyData: null
    }
  },
  onShow () {
    this.getLiteappNotify()
  },
  methods: {

    async  getLiteappNotify () {
      let notifyData = await LiteappNotify()
      let currentYear = new Date().getFullYear()
      console.log(currentYear)

      for (let key of notifyData) {
        let year = key.beginDateStr.slice(0, key.beginDateStr.indexOf('-'))
        if (Number(year) === currentYear) {
          key.beginDateStr = key.beginDateStr.slice(key.beginDateStr.indexOf('-') + 1)
        }
      }
      this.notifyData = notifyData
    },
    goTo (item, url) {
      this.setNotifyItem(item)

      this.$wx.navigator(url)
    },
    ...mapMutations({
      setNotifyItem: 'NOTIFY_ITEM'
    })

  }

}
</script>

<style scoped lang="scss">
@import '@/common/scss/base.scss';
.notify {
  ul {
    padding: 30px;

    li {
      @include border-all($lineColor);
      border-radius: 8px;
      background: #fff;
      padding: 20px 20px 0 20px;
      margin-bottom: 20px;
      .title {
        font-weight: 700;
        color: $croci;
        @include fontSize(32);
      }
      .conent {
        @include fontSize(28);
        @include color111;
        @include textLeng(3);
        padding: 18px 0;
      }
      .date {
        @include fontSize(24);
        @include color999;
        height: 68px;
        @include fjc;
        @include border-top($lineColor);
        div{
         @include fjc;
        }
      }
    }
  }
}
</style>
